<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people" style="display: none">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>

        <div class="card-panel-description">
          <div class="card-panel-text">
            年度销售额
            <span @click="handleClick('年度销售额')">
              <handlepopover :popoverInput="popoverInput" />
            </span>
          </div>
          <div v-if="biNumberItem.yearSales == null">未更新</div>

          <div class="card-panel-num" v-else>
            <span>{{ biNumberItem.yearSales }}</span>
            万
          </div>
        </div>
        <div class="card-panel-right">
          <div class="flex">
            <div class="card-panel-text">同比</div>
            <div class="card-panel-num">
              <!-- <i class=" el-icon-caret-bottom" /> -->
              <span>{{ biNumberItem.yearSalesYoy }}%</span>
            </div>
          </div>
          <div class="flex">
            <div class="card-panel-text">环比</div>
            <div class="card-panel-num">
              <!-- <i class=" el-icon-caret-bottom" /> -->
              <span>{{ biNumberItem.yearSalesChain }}%</span>
            </div>
          </div>
        </div>
      </div>
    </el-col>

    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people" style="display: none">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>

        <div class="card-panel-description">
          <div class="card-panel-text">
            退货金额
            <span @click="handleClick('退货金额')">
              <handlepopover :popoverInput="popoverInput" />
            </span>
          </div>
          <div v-if="biNumberItem.yearReturnAmount == null">未更新</div>

          <div class="card-panel-num" v-else>
            <span>{{ biNumberItem.yearReturnAmount }}</span>
            万
          </div>
        </div>
        <div class="card-panel-right">
          <div class="flex">
            <div class="card-panel-text">同比</div>
            <div class="card-panel-num">
              <!-- <i class=" el-icon-caret-bottom" /> -->
              <span>{{ biNumberItem.yearReturnAmountYoy }}%</span>
            </div>
          </div>
          <div class="flex">
            <div class="card-panel-text">环比</div>
            <div class="card-panel-num">
              <!-- <i class=" el-icon-caret-bottom" /> -->
              <span>{{ biNumberItem.yearReturnAmountChain }}%</span>
            </div>
          </div>
        </div>
      </div>
    </el-col>

    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people" style="display: none">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>

        <div class="card-panel-description">
          <div class="card-panel-text">
            净销售额
            <span @click="handleClick('净销售额')">
              <handlepopover :popoverInput="popoverInput" />
            </span>
          </div>
          <div v-if="biNumberItem.yearNetSaleAmount == null">未更新</div>

          <div class="card-panel-num" v-else>
            <span>{{ biNumberItem.yearNetSaleAmount }}万</span>
          </div>
        </div>
        <div class="card-panel-right">
          <div class="flex">
            <div class="card-panel-text">同比</div>
            <div class="card-panel-num">
              <!-- <i class=" el-icon-caret-bottom" /> -->
              <span>{{ biNumberItem.yearNetSaleAmountYoy }}%</span>
            </div>
          </div>
          <div class="flex">
            <div class="card-panel-text">环比</div>
            <div class="card-panel-num">
              <!-- <i class=" el-icon-caret-bottom" /> -->
              <span>{{ biNumberItem.yearNetSaleAmountChain }}%</span>
            </div>
          </div>
        </div>
      </div>
    </el-col>

    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div
        class="card-panel"
        @click="handleSetLineChartData('此次采购单价')"
        style="visibility: hidden"
      >
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>

        <div class="card-panel-description">
          <div class="card-panel-text">
            此次采购单价
            <el-tooltip
              :content="'此次采购单价'"
              effect="light"
              placement="bottom"
            >
              <svg-icon size="small" icon-class="question" />
            </el-tooltip>
          </div>

          <div class="card-panel-num"></div>
        </div>
        <div class="card-panel-right" style="display: none"></div>
      </div>
    </el-col>
    <!-- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people" style="display: none">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>

        <div class="card-panel-description">
          <div class="card-panel-text">
            月净销售额
            <el-tooltip
              :content="'月净销售额'"
              effect="light"
              placement="bottom"
            >
              <svg-icon size="small" icon-class="question" />
            </el-tooltip>
          </div>
          <div v-if="biNumberItem.monthlyNetSaleAmount == null">未更新</div>

          <div class="card-panel-num" v-else>
            {{ biNumberOfItem.monthlyNetSaleAmount }}
          </div>
        </div>
        <div class="card-panel-right">
          <div class="flex">
            <div class="card-panel-text">同比</div>
            <div class="card-panel-num">
              
              <span>{{ biNumberItem.monthlyNetSaleAmountYoy }}%</span>
            </div>
          </div>
          <div class="flex">
            <div class="card-panel-text">环比</div>
            <div class="card-panel-num">
              
              <span>{{ biNumberItem.monthlyNetSaleAmountChain }}%</span>
            </div>
          </div>
        </div>
      </div>
    </el-col> -->

    <!-- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people" style="display: none">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>

        <div class="card-panel-description">
          <div class="card-panel-text">
            本周销售额
            <el-tooltip
              :content="'本周销售额'"
              effect="light"
              placement="bottom"
            >
              <svg-icon size="small" icon-class="question" />
            </el-tooltip>
          </div>
          <div v-if="biNumberItem.weeklySales == null">未更新</div>

          <div class="card-panel-num" v-else>
            {{ biNumberOfItem.weeklySales }}万
          </div>
        </div>
        <div class="card-panel-right">
          <div class="flex">
            <div class="card-panel-text">同比</div>
            <div class="card-panel-num">
              
              <span>{{ biNumberItem.weeklySalesYoy }}%</span>
            </div>
          </div>
          <div class="flex">
            <div class="card-panel-text">环比</div>
            <div class="card-panel-num">
              
              <span>{{ biNumberItem.weeklySalesChain }}%</span>
            </div>
          </div>
        </div>
      </div>
    </el-col> -->
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people" style="display: none">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>

        <div class="card-panel-description">
          <div class="card-panel-text">
            年销售目标
            <span @click="handleClick('年销售目标')">
              <handlepopover :popoverInput="popoverInput" />
            </span>
          </div>
          <div v-if="biNumberItem.salesTargetYear == null">未更新</div>

          <div class="card-panel-num" v-else>
            <span>{{ biNumberItem.salesTargetYear }}</span>
            万
          </div>
        </div>
        <div class="card-panel-right">
          <!-- <div class="flex">
            <div class="card-panel-text">同比</div>
            <div class="card-panel-num">
              <i class=" el-icon-caret-bottom" />
              <span>{{ biNumberItem.weeklySalesYoy }}%</span>
            </div>
          </div>
          <div class="flex">
            <div class="card-panel-text">环比</div>
            <div class="card-panel-num">
              <i class=" el-icon-caret-bottom" />
              <span>{{ biNumberItem.weeklySalesChain }}%</span>
            </div>
          </div>-->
        </div>
      </div>
    </el-col>

    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people" style="display: none">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>

        <div class="card-panel-description">
          <div class="card-panel-text">
            订单数
            <span @click="handleClick('订单数')">
              <handlepopover :popoverInput="popoverInput" />
            </span>
          </div>
          <div v-if="biNumberItem.yearOrderCount == null">未更新</div>

          <div class="card-panel-num" v-else>
            <span>{{ biNumberItem.yearOrderCount }}</span>
          </div>
        </div>
        <div class="card-panel-right">
          <div class="flex">
            <div class="card-panel-text">同比</div>
            <div class="card-panel-num">
              <!-- <i class=" el-icon-caret-bottom" /> -->
              <span>{{ biNumberItem.yearOrderCountYoy }}%</span>
            </div>
          </div>
          <div class="flex">
            <div class="card-panel-text">环比</div>
            <div class="card-panel-num">
              <!-- <i class=" el-icon-caret-bottom" /> -->
              <span>{{ biNumberItem.yearOrderCountChain }}%</span>
            </div>
          </div>
        </div>
      </div>
    </el-col>

    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people" style="display: none">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>

        <div class="card-panel-description">
          <div class="card-panel-text">
            客单价
            <span @click="handleClick('客单价')">
              <handlepopover :popoverInput="popoverInput" />
            </span>
          </div>
          <div v-if="biNumberItem.yearCustomerPrice == null">未更新</div>

          <div class="card-panel-num" v-else>
            <span>{{ biNumberItem.yearCustomerPrice }}</span>
          </div>
        </div>
        <div class="card-panel-right">
          <div class="flex">
            <div class="card-panel-text">同比</div>
            <div class="card-panel-num">
              <!-- <i class=" el-icon-caret-bottom" /> -->
              <span>{{ biNumberItem.yearCustomerPriceYoy }}%</span>
            </div>
          </div>
          <div class="flex">
            <div class="card-panel-text">环比</div>
            <div class="card-panel-num">
              <!-- <i class=" el-icon-caret-bottom" /> -->
              <span>{{ biNumberItem.yearCustomerPriceChain }}%</span>
            </div>
          </div>
        </div>
      </div>
    </el-col>

    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div
        class="card-panel"
        @click="handleSetLineChartData('此次采购单价')"
        style="visibility: hidden"
      >
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>

        <div class="card-panel-description">
          <div class="card-panel-text">
            此次采购单价
            <el-tooltip
              :content="'此次采购单价'"
              effect="light"
              placement="bottom"
            >
              <svg-icon size="small" icon-class="question" />
            </el-tooltip>
          </div>

          <div class="card-panel-num"></div>
        </div>
        <div class="card-panel-right" style="display: none"></div>
      </div>
    </el-col>
    <!-- <el-col
      :xs="12"
      :sm="12"
      :lg="6"
      class="card-panel-col"
      v-for="(item, index) in biNumberItem.slice(0, 8)"
      :key="index"
    >
      
      <div class="card-panel" @click="handleSetLineChartData(item.name)">
        <div class="card-panel-icon-wrapper icon-people" style="display: none">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>

        <div class="card-panel-description">
          <div class="card-panel-text">
            
            {{ item.name }}
            <el-tooltip
              :content="item.dataDetail"
              effect="light"
              placement="bottom"
            >
              <svg-icon size="small" icon-class="question" />
            </el-tooltip>
          </div>
          <div v-if="item.value == null" class="card-panel-num">未更新</div>
          <div v-else>
          
            <count-to
              :start-val="0"
              v-if="item.name.includes('数')"
              :end-val="item.value"
              :duration="duration"
              class="card-panel-num"
            />
            <count-to
              :start-val="0"
              v-else-if="item.name.includes('率')"
              :decimals="2"
              :end-val="item.value"
              :duration="duration"
              class="card-panel-num"
            />
            <count-to
              :start-val="0"
              v-else
              :end-val="item.value"
              :duration="duration"
              class="card-panel-num"
            />
            <span
              v-show="
                item.name.includes('综合退货率') ||
                item.name.includes('商品平均折扣率')
              "
              >%</span
            >
          </div>
          <div class="card-panel-echarts">
          
          </div>
        </div>
        <div class="card-panel-right">
          <div class="flex">
            <div class="card-panel-text">环比</div>
            <div class="card-panel-num">
              <i class="el-icon-caret-top" v-if="item.chainSign == true" />
              <i
                class="el-icon-caret-bottom"
                v-else-if="item.chainSign == false"
              />
              <count-to
                :start-val="0"
                :decimals="2"
                v-if="item.chain !== null"
                :end-val="item.chain"
                :duration="duration"
              />
              <span v-if="item.chain == null">-</span>%
            </div>
          </div>
          <div class="flex">
            <div class="card-panel-text">同比</div>
            <div class="card-panel-num">
              <i class="el-icon-caret-top" v-if="item.yoySign == true" />
              <i
                class="el-icon-caret-bottom"
                v-else-if="item.yoySign == false"
              />
              <count-to
                :start-val="0"
                :decimals="2"
                v-if="item.yoy !== null"
                :end-val="item.yoy"
                :duration="duration"
              />
              <span v-if="item.yoy == null">-</span>%
            </div>
          </div>
        </div>
      </div>
    </el-col> -->
  </el-row>
</template>

<script>
import CountTo from "vue-count-to";
import handlepopover from "@/views/components/mypopover/click.vue";
import {
  listSysMenuProperty,
  getSysMenuProperty,
  delSysMenuProperty,
  addSysMenuProperty,
  updateSysMenuProperty,
} from "@/api/conf/SysMenuProperty";
export default {
  components: {
    CountTo,
    handlepopover,
  },
  model: {
    prop: "biNumberItem",
  },
  props: {
    biNumberItem: {
      type: Object,
      default: () => {},
    },
    biNumberOfItem: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      popoverInput: "",
      duration: 1000,
      highlighted: ["销售金额", "退款金额", "净销售额"], // 初始化时，前两个元素高亮
    };
  },
  methods: {
    handleClick(type) {
      if (!type) {
        return;
      }
      let obj = {
        component: "sale/order/index",
        property: type,
        path: "年度完成率",
      };
      listSysMenuProperty(obj).then((response) => {
        this.popoverInput = response.rows[0]
          ? response.rows[0].propertyInfo
          : "未定义";
        type = "";
      });
    },
    handleSetLineChartData(type) {
      // const m = ["messages", "shoppings"]
      if (this.highlighted.includes(type)) {
        return;
      }
      // 移除旧的高亮元素
      this.highlighted.shift();
      // 添加新的高亮元素
      this.highlighted.push(type);

      console.log(JSON.stringify(this.highlighted));
      this.$emit("handleSetLineChartData", type);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-carousel__indicator--horizontal {
  display: none;
}

.highlight {
  border-top: 5px solid #36a3f7;
}

i.el-icon-caret-top::before {
  color: #ff0000;
  /* 这将把颜色改为红色 */
}

i.el-icon-caret-bottom::before {
  color: green;
  /* 这将把颜色改色 */
}

//上三角
.increase {
  width: 10px;
  height: 10px;
  border-width: 3px;
  border-color: transparent transparent red transparent;
  border-style: solid;
  margin: 0 0 3px 5px;
}

//下三角
.decrease {
  width: 10px;
  height: 10px;
  border-width: 3px;
  border-color: green transparent transparent transparent;
  border-style: solid;
  margin: 3px 0 0 5px;
}

.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    // border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: left;

      font-weight: bold;
      margin: 26px;
      margin-left: 10px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 13px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 15px;
      }
      .card-panel-echarts {
        background-color: red;
      }
    }

    .card-panel-right {
      float: right;
      // text-align: center;
      font-weight: bold;
      margin: 26px;
      margin-right: 10px;

      .flex {
        display: flex;
      }

      .card-panel-text {
        text-align: center;
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 13px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 14px;
        display: flex;
        align-items: center;
        margin-bottom: 12px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
